<template>
  <view>
    <view
      class="grace-dialog-shade"
      v-if="needUpgrade"
      @touchmove.stop="stopFun"
    >
      <view
        class="dialog gdFadeIn"
        @tap.stop="stopFun"
        :style="{ width: width }"
      >
        <view class="content">
          <view class="note">
            <view class="cloud-font-32"
              >{{ $t("common.update.version") }}({{ newVersion }})</view
            >
            <view class="mt-20 message">
              <cloudHtml :html="content" />
            </view>
          </view>
          <view style="display: flex; justify-content: center;">
            <view class="update-btn" v-if="!downloadShow" @tap.stop="update">{{
              btnText
            }}</view>
            <view class="update-btn" v-else>{{ btnText }}</view>
          </view>
        </view>
        <view
          style="display: flex; justify-content: center;"
          @tap.stop="closeDialog"
        >
          <image
            src="/static/update_del.png"
            style="width: 75rpx; height: 135rpx;"
          />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    show: {
      type: [Boolean, String],
      default: false
    },
    version: {
      type: String,
      default: "1.0.0"
    },
    newVersion: {
      type: String,
      default: "1.0.0"
    },
    download: {
      type: String,
      default: ""
    },
    content: {
      type: String,
      default: "<p>1、更新已知BUG</p>"
    }
  },
  data() {
    return {
      width: "590rpx",
      downloadShow: false,
      btnText: this.$t("common.update.updateTips")
    };
  },
  computed: {
    /* 手动触发检测需要升级 */
    needUpgrade() {
      return this.show && this.hasNewVersion;
    },

    /* 判断是否有新版本 */
    hasNewVersion() {
      const version = this.version + "";
      const newVersion = this.newVersion + "";

      return (
        parseFloat(version.replace(/\./, "")) <
        parseFloat(newVersion.replace(/\./, ""))
      );
    }
  },
  watch: {
    show(val) {
      if (val === true && !this.hasNewVersion) {
        this.makeToast(this.$t("common.update.isLatestVersion"));
        setTimeout(this.closeDialog, 2500);
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit("show", false);
    },
    stopFun() {},

    update() {
      this.downloadShow = true;

      /* 第2 种方式 [ 直接下载安装 只适合 安卓] */
      if (this.download.indexOf(".apk") != -1) {
        var dtask = plus.downloader.createDownload(
          this.download,
          {
            method: "GET",
            retry: 0
          },
          (d, status) => {
            if (status == 200) {
              this.makeToast(this.$t("common.update.success"));
              this.btnText = this.$t("common.update.downloadSuccess");
              plus.runtime.install(d.filename);
              this.downloadShow = false;
            } else {
              //下载失败，给予提示
              this.makeToast(this.$t("common.update.downloadTips"));
              setTimeout(() => {
                this.btnText = this.$t("common.update.updateTips");
                this.downloadShow = false;
              }, 2000);
            }
          }
        );
        dtask.start();

        this.btnText = this.$t("common.update.downloadIn");
        dtask.addEventListener("statechanged", (task, status) => {
          switch (task.state) {
            case 3:
              var a = (task.downloadedSize / task.totalSize) * 100;
              this.btnText =
                this.$t("common.update.downloadIn") + "(" + parseInt(a) + "%)";
              break;
            case 4: // 下载完成
              this.downloadShow = false;
              break;
            default:
              console.log(task.state);
              break;
          }
        });
      } else {
        plus.runtime.openURL(this.download);
      }
    }
  }
};
</script>
<style>
@keyframes gdFadeIn {
  from {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.gdFadeIn {
  animation: gdFadeIn 200ms linear;
}

.grace-dialog-shade {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
}

.grace-dialog-shade .dialog {
  width: 85%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9992;
  border-radius: 5px;
}

.grace-dialog-shade .content {
  background: url("");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 590rpx;
  height: 710rpx;
}

.grace-dialog-shade .content .note {
  padding: 320rpx 60rpx 0rpx 60rpx;
}

.grace-dialog-shade .content .note .message {
  width: 100%;
  height: 150rpx;
  overflow: scroll;
}

.update-btn {
  width: 300rpx;
  font-size: 28rpx;
  text-align: center;
  padding: 20rpx 0;
  border: 1rpx solid #ffffff;
  border-radius: 60rpx;
  color: #ffffff;
  margin-top: 60rpx;
}
</style>
